﻿<script setup lang="ts" name="EpArticle">
import { getArticleInfo } from '@/api/elementPlus'
import useScrollPosition from '@/hooks/scrollPosition'
import useAffixPosition from '@/hooks/affixPosition'
import { storeToRefs } from 'pinia'
import { usePublicStore } from '@/store/public/publicStore'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
useAffixPosition()
const publicStore = usePublicStore()
const { affixTop } = storeToRefs(publicStore)

// 滚动行为
useScrollPosition(route)

const initData: any = reactive({
  data: []
})
const getInitData = () => {
  getArticleInfo(null, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    console.log(res)
    if (res.data && res.data.length > 0) {
      initData.data = []
      initData.data.push(...res.data)
      console.log(initData)
    }
  })
}
getInitData()

const activeTab = ref('detail')

const handleTabClick = (tab, event) => {
  console.log(tab, event)
}

const activeCollapse = ref('1')
type activitiesType = {
  content: string,
  timestamp: string,
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info',
  size?: 'normal' | 'large',
  icon?: string,
  color?: string,
  hollow?: boolean,
}
const activities: activitiesType[] = [
  {
    content: 'Custom icon',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    icon: 'MoreFilled'
  },
  {
    content: 'Custom color',
    timestamp: '2018-04-03 20:46',
    color: '#0bbd87'
  },
  {
    content: 'Custom size',
    timestamp: '2018-04-03 20:46',
    size: 'large'
  },
  {
    content: 'Custom hollow',
    timestamp: '2018-04-03 20:46',
    type: 'primary',
    hollow: true
  },
  {
    content: 'Default node',
    timestamp: '2018-04-03 20:46'
  }
]
</script>
<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-affix :offset="affixTop" target=".vk-scroll-wrap"><el-page-header icon="ArrowLeft" content="详情页" /></el-affix>
      <el-alert title="详情页展示，本页面主要使用element-plus的页头组件、标签页组件、走马灯、折叠面板、描述列表、时间线组件。" type="success" :closable="false" show-icon />
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="item in initData.data" :key="item">
          <el-image :src="'https://cdn.jsdelivr.net/gh/kaivin/images/list/' + item.type + '/' + item.img + '.jpg'" fit="cover" lazy>
            <template #placeholder>
              <div class="image-slot">
                <div class="slot-content">
                  <svg-icon icon="ep:picture"></svg-icon>
                  <p>{{ $t('settings.settingLoadingText') }}</p>
                </div>
              </div>
            </template>
            <template #error>
              <div class="image-slot">
                <div class="slot-content">
                  <svg-icon icon="ii:icon-image-failed"></svg-icon>
                  <p>{{ $t('settings.settingLoadingFailed') }}</p>
                </div>
              </div>
            </template>
          </el-image>
        </el-carousel-item>
      </el-carousel>
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="详情" name="detail">
          <h3>详情数据信息展示标签页</h3>
          <el-collapse v-model="activeCollapse" accordion>
            <el-collapse-item name="1">
              <template #title>
                <svg-icon icon="ep:operation"></svg-icon>
                <strong>推销途径</strong>
              </template>
              <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
              <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template #title>
                <svg-icon icon="ep:user"></svg-icon>
                <strong>客户反馈</strong>
              </template>
              <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
              <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <template #title>
                <svg-icon icon="ep:star"></svg-icon>
                <strong>有效评论</strong>
              </template>
              <div>Simplify the process: keep operating process simple and intuitive;</div>
              <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
              <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <template #title>
                <svg-icon icon="ep:tools"></svg-icon>
                <strong>技术理论</strong>
              </template>
              <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
              <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
            </el-collapse-item>
          </el-collapse>
          <p>在手风琴组件结尾加一段结束性文案</p>
        </el-tab-pane>
        <el-tab-pane label="参数" name="params">
          <el-descriptions title="产品参数" :column="3" border>
            <template #extra>
              <el-button type="primary">编辑</el-button>
            </template>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <svg-icon icon="ep:user"></svg-icon>
                  产品名
                </div>
              </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <svg-icon icon="ep:rank"></svg-icon>
                  产品编码
                </div>
              </template>
              18100000000
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <svg-icon icon="ep:clock"></svg-icon>
                  生产日期
                </div>
              </template>
              2000-08-08 16:34:32
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <svg-icon icon="ep:picture"></svg-icon>
                  标签
                </div>
              </template>
              <el-tag>酒精</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <svg-icon icon="ep:more-filled"></svg-icon>
                  产地
                </div>
              </template>
              No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="货源追踪" name="track">
          <div style="padding: 20px 20px 0">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="(activity.type)" :color="activity.color" :size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp" placement="top">
                <el-card>{{ activity.content }}</el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-alert {
  margin: var(--el-space) 0;
}

.el-card {
  :deep(.el-image) {
    display: block;
    width: 100%;
    height: 100%;
  }

  .el-collapse {
    :deep(.el-icon) {
      margin-right: 5px;
      color: var(--el-text-color-regular);
      font-size: var(--el-font-size-base);
    }
  }
}

.cell-item {
  display: flex;
  align-items: center;

  .el-icon {
    margin-right: 5px;
  }
}
</style>
